<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page contentType="text/html;charset=UTF-8"%>

<div id="contentwrapper">
<div id="content" class="content container_24 clearfix">


<div class="grid_12">

<div class="form_border registration_page">
<h5>Create an account</h5>

<p>Please fill out this form to create an account</p>

<p class="required_caption">
    Fields marked * are required
</p>


<form:form modelAttribute="userd"     method="post" id="RegistrationForm" class="registration_form">


<fieldset>

<!-- @todo: Convert this into a dynamically driven list of titles -->
<div class="form_field title">
    <div class="input_value">


        <label>


            <em>*</em>


            Title:

        </label>


        <div class="value">


            <form:select class="selectbox required" id="dwfrm_profile_customer_title" path="title">
                <option class="selectoption" label="Please select" value="0">Please select</option>
                <form:option class="selectoption" label="Mr" value="Mr.">Mr</form:option>
                <form:option class="selectoption" label="Mrs" value="Mrs.">Mrs</form:option>
                <form:option class="selectoption" label="Miss" value="Miss">Miss</form:option>
            </form:select>
            <span class="hidden json">{label:"Title"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


        </div>


    </div>
</div>


<div class="form_field">
    <label>
        <em>*</em>
        First Name:
    </label>
    <div class="value">
        <form:input path="firstName" class="textinput required" id="dwfrm_profile_customer_firstname" type="text"
                    maxlength="15"/>
        <!-- display text area input field -->
        <span class="hidden json">{label:"First Name"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->
    </div>
</div>


<div class="form_field">
    <label>
        <em>*</em>
        Last Name:
    </label>
    <div class="value">
        <form:input path="lastName" class="textinput required" id="dwfrm_profile_customer_lastname" type="text"
                    maxlength="26"/>
        <!-- display text area input field -->
        <span class="hidden json">{label:"Last Name"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->
    </div>
</div>
<div class="form_field">
    <label>
        <em>*</em>
        Email:
    </label>


    <div class="value">


        <form:input path="email" class="textinput required" id="dwfrm_profile_customer_email" type="text"
                    maxlength="50"/>
        <!-- display text area input field -->


        <span class="hidden json">{label:"Email"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


    </div>


</div>


<div class="form_field ">


    <label>


        <em>*</em>


        Confirm Email:

    </label>


    <div class="value">


        <input class="textinput required" id="dwfrm_profile_customer_emailconfirm" type="text"       maxlength="50"/>
        <!-- display text area input field -->


        <span class="hidden json">{label:"Confirm Email"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


    </div>


</div>


<div class="form_field">


    <label>


        <em>*</em>


        Password:

    </label>


    <div class="value">


        <form:input path="password" class="textinputpw required" id="dwfrm_profile_login_password" type="password"
                    maxlength="20"/>


        <span class="hidden json">{label:"Password"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


    </div>




				<span class="additional_information">

<img src="resource_account_files/icon_exc.png" class="jsToolTip" rel="tt_password-tooltip">
<div class="jsInfo" id="tt_password-tooltip">


    <div class="contentasset"><!-- dwMarker="content" dwContentID="bdl7giaagRJnaaaacUzXsy9CTb" -->

        <p>Please choose a password with a minimum of 6 characters for your account</p>


    </div>
    <!-- End contentasset -->


</div>

	    		</span>
</div>


<div class="form_field">


    <label>


        <em>*</em>


        Confirm Password:

    </label>


    <div class="value">


        <input class="textinputpw required" id="dwfrm_profile_login_passwordconfirm" type="password"
               name="dwfrm_profile_login_passwordconfirm" value maxlength="20">


        <span class="hidden json">{label:"Confirm Password"}</span><!-- this MUST be immediately after the input/field tag. Hiden data to be attached to the input field (app.hiddenData in app.js -->


    </div>


</div>


<div class="form_field">


    <div class="checkbox">


        <input class="checkinput" type="checkbox" name="dwfrm_profile_customer_addtoemaillist"
               id="dwfrm_profile_customer_addtoemaillist" value="true" maxlength="2147483647">


    </div>


    <div class="email_signup">
					<span>
						<label for="dwfrm_profile_customer_addtoemaillist">Remember me</label>
						<br>
						<span class="smaller">(Not recommended for use on shared or public computers)</span>
					</span>
    </div>
</div>


<!--@todo: Configure URL for terms and conditions -->
<p class="agree_text">
    By creating your account you agree to our
    <a title="Terms and Conditions" id="termsConditions"
       href="http://shop.bestseller.com/customer-service/terms-and-conditions/cs-terms-and-conditions,en_GB,pg.html"
       target="_blank">
        Terms and Conditions
    </a>
</p>


<!-- Button -->
<div class="form_actions">
    <button class="positive step_forward jsGAVirtualPageview" type="button" onclick="submitForm();"
            value="Create My Account" name="dwfrm_profile_confirm" rev="Account_CreateMyAccount">
        <span>Create My Account</span>
    </button>
</div>


<div id="registrationformaction"></div>
<input type="hidden" name="dwfrm_profile_securekey" value="1090762766">
</fieldset>
</form:form>
</div>
<!-- END: registration -->

<div class="privacypolicy" id="privacypolicy" style="display:none;overflow:auto;">


</div>

</div>

<!-- Benefits of registration text -->
<div class="grid_12">
    <div class="benefits_wrapper">


        <div class="contentasset"><!-- dwMarker="content" dwContentID="bdYTQiaagR6RQaaacUvqQy9CTb" -->

            <p>Your benefits as a registered user are:</p>
            <ul>
                <li>Quick and easy checkout process</li>
                <li>View your order history</li>
                <li>Save multiple shipping addresses</li>
                <li>Possibility of receiving special offers</li>
                <li>Possibility of receiving invitations for special events</li>
            </ul>
            <p>&nbsp;</p>


        </div>
        <!-- End contentasset -->


    </div>
</div>

<script type="text/javascript"><!--
app.URLs.submitFormURL = "/on/demandware.store/Sites-ROE-Site/en_GB/Account-UpdateName"

function submitForm() {
    jQuery('#registrationformaction').append("<input name='dwfrm_profile_confirm' type='hidden' />");
    jQuery("#RegistrationForm").submit();
}

jQuery(document).ready(function () {

    jQuery('#privacypolicy').dialog({
        bgiframe:true,
        autoOpen:false,
        modal:true,
        height:480,
        width:600,
        title:'See Privacy Policy',
        resizable:false
    });

    jQuery('#privacyPolicy').click(function () {
        jQuery('#privacypolicy').show();
        jQuery('#privacypolicy').dialog('open');
    });

    // clear out formfields that could be part of autocomplete
    jQuery("[name=dwfrm_profile_customer_emailconfirm]").val("");
    jQuery("[name=dwfrm_profile_login_password]").val("");
    jQuery("[name=dwfrm_profile_login_passwordconfirm]").val("");
});
//--></script>


</div>
</div>